<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0, minimum-scale=1.0,maximum-scale=1.0" />
<script type="text/javascript" src="../common/meta.js"></script> 
<script type="text/javascript" src="productDetail.js"></script> 
<script type="text/javascript" src="./cache.js"></script> 
<style>
		.ui-body-c, .ui-overlay-c {
    	background: none;
    	color: #333;
		}	
	.home{
	 	margin-top:5px;
	 	float:right;
	 }
	.ui-header .ui-title{
	    font-size: 18px;
	} 
	.tab-content .tab-pane{
   		margin-top:1px;
   		padding: 6px 3px 0px 5px;
   	}
   	#detailTab .active a{
   		background-color: #A6D7E8;
   		background-image: linear-gradient(to bottom, #89CBE1, #40ABCE);
   		background-repeat: repeat-x;
   		color: #FFFFFF;
   		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }
    #detailTab li a{
    	background-color: #ADD8E6;
    	color: #000000;
    	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }
    #detailTab {
    	margin-bottom: 0px;
    }
    #detailTab .nav{
    	margin-bottom: 0px;
    }
    .tab-content .tab-pane{
   		margin-top:1px;
   		border: 1px solid #DDDDDD;
   		padding: 6px 3px 0px 5px;
   	}
   	.tab-content .tab-pane .ui-grid-a{
   		height: 29px;
   	}
    .panel{
   		margin:10px;
   		padding: 2px;
   		border-radius:8px;
    }
    #nutrition,#description{
    	height: 75px;
    }
    .tab-border{
   		border: 0 1px 1px 1px;
   		border-color: gray;
   	}
   	.nav-tabs{
    		margin-bottom: 0px;
    		border-bottom: 0px;
    }
    .bs-docs-example{
    	margin-bottom: 5px;
    }
	.img-polaroid {
		background-color: #000;
		border:0px;
		box-shadow:0 0px 0px rgba(0, 0, 0, 0);
		padding:0px;
	}
           ul, ol {
			margin: 0 0 0px 0px;
			padding: 0;
		}
         .back{
		 	margin-top:5px;
             float:left;
		 }

</style>
</head>
<body>
<div id="productDetail" data-role="page" class="bodyframe">
	<header data-role="header" data-fixed-position="top" class="theme-info"> 
	    <ul class="back">
	   		<a  href="#" data-rel="back"><image src='../image/left_48.png'></image></a>
	   	</ul>
		<ul class="home">
			<a  id="home" href="main.html"><image src='../image/home_48.ico'></image></a>
		</ul>
		<h1 id="productName"></h1>
	</header>
	
	<div class="panel">
		<div data-role="content" id="image">
		</div>
		<div class="bs-docs-example">
			<p  class="lead">
				<strong>价格:￥</strong><span id="price"></span>
			</p>
			<ul id="detailTab" class="nav nav-tabs">
				<li class="active">
					<a data-toggle="tab" href="#nutrition">营养价值</a>
				</li>
				<li>
					<a data-toggle="tab" href="#description">配料表</a>
				</li>
			</ul>
			<div class="tab-content">
			  <div class="tab-pane active" id="nutrition"></div>
			  <div class="tab-pane" id="description"></div>
			</div>
		</div>
		<form class="form-inline">
			  <input type="text" class="input-small" id="productId" style="display:none">
			  <button type="button" class="btn" id="addToCart">加入购物车</button>
			  <button type="button" class="btn" id="buyProduct">立即下单</button>
		</form>
	</div>
</div>
</body>
</html>